<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="search.displayName"
        v-haspermi="['bxy:employee:search']"
        :placeholder="$t('ddio.name')"
        :maxlength="50"
        class="filter-item"
        clearable
        @blur="trim('displayName')"
        @mouseout.native="blurRule($event)"
      />
      <el-input
        v-model="search.phone"
        v-haspermi="['bxy:employee:search']"
        :placeholder="$t('ddio.tel')"
        :maxlength="11"
        class="filter-item"
        clearable
        onkeyup="value=value.replace(/[^\d]/g,'')"
        @blur="trim('phone')"
        @mouseout.native="blurRule($event)"
      />
      <el-button
        v-haspermi="['bxy:employee:search']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="refreshUser"
      >{{ $t('common.search') }}</el-button>
    </div>

    <el-table
      :data="doodUsers"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        type="index"
        :label="$t('common.num')"
        align="center"
        width="80"
      />
      <el-table-column
        property="id"
        :label="$t('ddio.userId')"
        align="center"
        width="200"
      />
      <el-table-column
        property="displayName"
        :label="$t('ddio.name')"
        align="center"
        width="200"
      />
      <el-table-column
        property="getUserSex"
        :label="$t('ddio.sex')"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <div>
            {{ getUserSex(scope.row.sex) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        property="phoneNums"
        :label="$t('ddio.tel')"
        align="center"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.size"
      @pagination="pagination"
    />
    <el-dialog :title="$t('user.synchro')" :visible.sync="synchroVisible">
      <div class="synchro-form">
        <div class="synchro-item">
          <el-radio v-model="mode" label="0">{{
            $t('user.fullSync')
          }}</el-radio>
        </div>
        <div class="synchro-item">
          <el-radio v-model="mode" label="1">{{
            $t('user.incrementalSync')
          }}</el-radio>
        </div>
        <el-button class="synchro-btn" type="warning" @click="syncUser">{{
          $t('ddio.syncData')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import doodApi from '@/api/ddio';
import Pagination from '@/components/Pagination';
import { trim } from '@/utils/index';

export default {
  name: 'Employee',
  components: { Pagination },
  data() {
    return {
      search: {
        displayName: null,
        phone: null,
        page: 1,
        size: 10,
      },
      doodUsers: [],
      total: 0,
      mode: '0',
      synchroVisible: false,
    };
  },
  computed: {
    ...mapGetters(['isSuperman', 'doodId']),
  },
  created() {
    this.refreshUser();
  },
  methods: {
    // 重新加载用户数据
    refreshUser() {
      this.search.page = 1;
      this.getDoodUser();
    },
    async reloadUser() {
      await doodApi.reloadDoodUser();
      await this.$message({
        message: this.$t('ddio.successReloadDoodUser'),
        type: 'success',
      });
      this.controlSynchroDialog(false);
    },
    // 获取豆豆用户信息
    async getDoodUser() {
      const res = await doodApi.getDoodUser(this.search);
      this.doodUsers = res.data;
      this.total = Number(res.headers['x-total-count']);
    },
    pagination() {
      this.getDoodUser();
    },
    getUserSex(sex) {
      switch (sex) {
        case 0:
          return this.$t('common.unknown');
        case 1:
          return this.$t('common.male');
        case 2:
          return this.$t('common.female');
      }
    },
    /**
     * 显示/隐藏 同步模式弹窗
     * @param {Boolean} state  ture or false
     */
    controlSynchroDialog(state) {
      this.synchroVisible = state;
    },
    /**
     * 同步人员信息
     */
    async syncUser() {
      const res = await doodApi.syncUser(Number(this.mode));
      if (res.data.code === '0') {
        await this.$message({
          message: this.$t('ddio.successReloadDoodUser'),
          type: 'success',
        });
        this.controlSynchroDialog(false);
      } else {
        await this.$message({
          message: res.message,
          type: 'error',
        });
      }
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.search[name] = trim(this.search[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  margin-left: 15px;
  margin-top: 15px;
  color: #333;
  font-size: 14px;
}
.department {
  margin-left: 15px;
}
.el-input {
  width: 250px;
}
.button {
  margin-left: 15px;
}
.table {
  width: 100%;
  margin-left: 10px;
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  padding: 0 20px 0;
  width: 100%;
  text-align: right;
}
.synchro-form {
  margin-top: -20px;
  overflow: hidden;
  .synchro-item {
    margin: 20px 0;
    padding-left: 40px;
    span {
      display: inline-block;
      vertical-align: top;
    }
  }
  .synchro-btn {
    float: right;
  }
}
</style>
